<template>
  <div class="home-container">
    <van-nav-bar class="page-nav-bar" fixed>
      <van-button
        slot="title"
        size="small"
        type="info"
        icon="search"
        round
        class="search-btn"
        to="/search"
        >搜索</van-button
      >
    </van-nav-bar>
    <!-- // 频道 -->
    <van-tabs v-model="active" swipeable class="channel-tabs" animated>
      <van-tab :title="item.name" v-for="item in channels" :key="item.id"
        ><ArticleList :channel="item"></ArticleList
      ></van-tab>
      <div slot="nav-right" class="placeholder"></div>
      <div slot="nav-right" class="hamburger-btn">
        <i
          class="toutiao toutiao-gengduo"
          @click="isChannelEditShow = true"
        ></i>
      </div>
    </van-tabs>
    <van-popup
      v-model="isChannelEditShow"
      position="bottom"
      closeable
      close-icon-position="top-left"
      :style="{ height: '100%' }"
    >
      <channel-edit
        :my-channels="channels"
        :active="active"
        @update-active="onUpdateActive"
      ></channel-edit>
    </van-popup>
  </div>
</template>
<!--
      List 列表组件：瀑布流滚动加载，用于展示长列表。

      List 组件通过 loading 和 finished 两个变量控制加载状态，
      当组件初始化或滚动到到底部时，会触发 load 事件并将 loading 自动设置成 true，此时可以发起异步操作并更新数据，
      数据更新完毕后，将 loading 设置成 false 即可。
      若数据已全部加载完毕，则直接将 finished 设置成 true 即可。

      - load 事件：
        + List 初始化后会触发一次 load 事件，用于加载第一屏的数据。
        + 如果一次请求加载的数据条数较少，导致列表内容无法铺满当前屏幕，List 会继续触发 load 事件，直到内容铺满屏幕或数据全部加载完成。

      - loading 属性：控制加载中的 loading 状态
        + 非加载中，loading 为 false，此时会根据列表滚动位置判断是否触发 load 事件（列表内容不足一屏幕时，会直接触发）
        + 加载中，loading 为 true，表示正在发送异步请求，此时不会触发 load 事件

      - finished 属性：控制加载结束的状态
        + 在每次请求完毕后，需要手动将 loading 设置为 false，表示本次加载结束
        + 所有数据加载结束，finished 为 true，此时不会触发 load 事件
     -->
<script>
import { getUserChannels } from '@/api/user.js'
import ArticleList from './components/article-list.vue'
import ChannelEdit from './components/channel-edit.vue'
import { mapState } from 'vuex'
import { getItem } from '@/utils/storge'
export default {
  props: [],
  components: {
    ArticleList,
    ChannelEdit
  },
  computed: {
    ...mapState(['user'])
  },
  data () {
    return {
      active: 0,
      channels: [],
      isChannelEditShow: false
      // 方式1 多个频道对应一个列表
      // list: []
      // 方式2 多个频道对应多个列表
      // list0:[]
      // list1:[]
      // 方式3 多个频道对应多个子组件
    }
  },
  async created () {
    if (this.user) {
      // 已登录，发请求
      const { data: { data: { channels } } } = await
      getUserChannels()
      this.channels = channels
    } else {
      // 未登录
      // 判断localstorage
      if (getItem('TOUTIAO_CHANNELS')) {
        // 有
        this.channels = getItem('TOUTIAO_CHANNELS')
      } else {
        // 没有 发送请求获取默认数据
        const { data: { data: { channels } } } = await
        getUserChannels()
        this.channels = channels
      }
    }
  },
  mounted () {},
  methods: {
    onUpdateActive (index, isChannelEditShow = false) {
      this.active = index
      this.isChannelEditShow = isChannelEditShow
    }
  },
  watch: {}
}
</script>

<style lang="less" scoped>
.home-container {
  padding-top: 110px;
  padding-bottom: 100px;
}
// 用全局样式
// .van-nav-bar__title {
//   max-width: unset !important;
// }
// 覆盖子组件的样式,方式2-用传透
/deep/ .van-nav-bar__title {
  max-width: inherit !important;
}
.search-btn {
  width: 555px;
  height: 64px;
  background-color: #5babfb;
  border: none;
  font-size: 28px;
  .van-icon {
    font-size: 32px;
  }
}
/deep/ .channel-tabs {
  .van-tabs__nav {
    position: fixed;
    top: 92px;
    z-index: 1;
    left: 0px;
    height: 100px;
    width: 100%;
  }
  .van-tab {
    border-right: 1px solid #edeff3;
    min-width: 200px;
    height: 80px;
    .van-tab__text {
      font-size: 27px;
      color: #777777;
    }
  }
  .van-tab--active .van-tab__text {
    color: #333 !important;
  }
  .van-tabs__line {
    width: 31px !important;
    height: 6px;
    background: rgba(50, 150, 250, 1);
    border-radius: 3px;
    bottom: 8px;
  }
  .van-tabs_nav {
    padding: 0;
  }
  .van-tabs__nav--line {
    padding-bottom: 0;
  }
}
.hamburger-btn {
  position: fixed;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 66px;
  height: 82px;
  background-color: #fff;
  opacity: 0.902;
  i.toutiao {
    font-size: 33px;
  }
  &:before {
    content: "";
    position: absolute;
    left: 0;
    width: 1px;
    height: 100%;
    background-image: url("~@/assets/gradient-gray-line.png");
  }
  .my-grid .van-icon-clear {
    right: -48px !important;
    top: -19px !important;
  }
}
</style>
